<template>
  <div class="zwdetal">
    <div class="zwlbdetails">
      <ul>
        <li>
          <p>
            <span class="datelzy">{{reslit.name}}</span>

            <span class="zwlbsj zwlbsjxz" style="color:red">{{reslit.wageText}}</span>
            <!-- <span class="zwlbsjxz" style="color:#555555;font-weight:400">{{reslit.refreshTime}}</span> -->
          </p>
          <!-- <p>{{reslit.minWage}}~{{reslit.maxWage}}</p> -->
          <!-- <p>{{reslit.workAreaText}}</p> -->
          <p>
            <!-- {{reslit.sexText?reslit.sexText:reslit.sexText===''?"不限":reslit.sexText}}
            <span
              class="zwfg"
            >|</span>-->
            {{reslit.educationText?reslit.educationText:reslit.educationText===''?"不限":reslit.educationText}}
            <span class="zwfg">|</span>
            {{reslit.workExpText?reslit.workExpText:reslit.workExpText===''?"不限":reslit.workExpText}}
            <van-button type="default" class="zwlbfdan">{{reslit.statusText==='已下线'?'已下线':''}}</van-button>
          </p>

          <p>
            <span>{{reslit.companyInfo?reslit.companyInfo.name:""}}</span>
            <span class="zwlbsj" style="float: right;padding-right: 0.16rem">{{reslit.refreshTime}}</span>
          </p>
          <van-divider style="color: #323233;border-width: 0.01rem;" />
        </li>
      </ul>
    </div>
    <div class="zwlbdetails">
      <ul>
        <li>
          <p>
            <span class="datelzygsms">职位描述</span>
          </p>
          <p ref="element" :style="{height:ckheight,overflow: 'hidden'}" v-html="reslit.describe">
            {{reslit.describe}}
          </p>

          <div class="ckqb" @touchstart="ckqb" v-show="ckshow&&qbshow">查看全部</div>
          <div class="ckqb" @touchstart="ckqb" v-show="!ckshow">收起</div>
        </li>
      </ul>
    </div>
    <div class="zwlbdetails">
      <ul>
        <li>
          <p>
            <span class="datelzygsms">公司信息</span>
          </p>
          <div @click="companyDetails">
            <div style="float:left">
              <span>
                <img class="datelzygsmsimg" :src="reslit.companyInfo.logo" />
              </span>
            </div>
            <div style="margin-left:2rem">
              <p>
                <span class="datelzy datelzywor"
                  style="margin-top: 0.3rem;display: inline-block;">{{reslit.companyInfo.name}}</span>
              </p>
              <p>
                {{reslit.companyInfo.scaleText}}
                <span class="zwfg">|</span>
                {{reslit.companyInfo.natureText}}
              </p>
              <p>{{reslit.companyInfo.tradeText}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="nvebarground nvebargroundpsmd"></div>
    <div class="zwlbdetails">
      <ul>
        <li>
          <p class="datelzygsms">你感兴趣的职位</p>
        </li>
      </ul>
    </div>
    <div class="zwlb zwlbgsxx">
      <van-list v-model="loading" :finished="finished" :offset="10" :immediate-check="false" @load="onLoad">
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <div class="zwlb">
          <ul>
            <li v-for="(item,index) in list" @click="jobdetails(item.id,item.companyId,item.category)"
              :key="index+'bgsxx'">
              <div class="zwlbnr">
                <p class="zwlbbt">
                  {{item.name}}
                  <span class="zwlbsj zwlbsjxz" style="color:red">{{item.wageText}}</span>
                </p>
                <p>
                  {{item.educationText?item.educationText:item.educationText===''?"不限":item.educationText}}
                  <span class="zwfg">|</span>
                  {{item.workExpText?item.workExpText:item.workExpText===''?"不限":item.workExpText}}
                </p>
                <p>
                  <span>{{item.companyName?item.companyName:""}}</span>
                  <span class="zwlbsj">{{item.refreshTime}}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </van-list>
      <div class="jobbutton jobbuttonbutt">
        <!-- <van-row>
          <van-col span="8">
            <button class="btnright" @click="resumeDeliver(1)">立即沟通</button>
          </van-col>
          <van-col span="12">
            <button class="btnright" :disabled="reslit.isResumeDeliver"
              @click="resumeDeliver(2)">{{reslit.isResumeDeliver?"已申请":"申请职位"}}</button>
          </van-col>
          <van-col span="12">
            <button class="btnleft" @click="iffavorite">{{collectneme}}</button>
          </van-col>
        </van-row> -->
        <van-row>
          <van-col span="8">
            <button class="btnleft" @click="iffavorite">{{collectneme}}</button>
          </van-col>
          <van-col span="16">
            <button class="btnright" :disabled="reslit.isResumeDeliver"
              @click="resumeDeliver">{{reslit.isResumeDeliver?"已申请":"申请职位"}}</button>
          </van-col>
        </van-row>

      </div>
    </div>
    <van-popup v-model="showPickerqwdd" position="bottom">
      <van-picker show-toolbar value-key="title" :item-height="45" :columns="columnsqwdd" @confirm="onConfirmgqwdd"
        @cancel="showPickerqwdd = false" />
    </van-popup>

    <van-popup v-model="liaisonmanshow" position="bottom">
      <van-picker show-toolbar value-key="comname" :item-height="45" :columns="liaisonmanarr" @confirm="chatInsert"
        @cancel="liaisonmanshow = false" />
    </van-popup>
    <div class="dialogprent" v-show="dialogshow">
      <div class="dialogjl">
        <span class="dialogjltb">简历</span>
        <span style="float: right;">
          <van-icon name="cross" @click="denic()" />
        </span>
      </div>
      <van-divider style="color: rgba(204,204,204,1)" />
      <div>
        <p style="font-weight: bold;
    margin: 0 0.5rem 1rem 0.5rem;">您还没创建简历，请创建简历之后再投递</p>
      </div>
      <div class="dialogbutt">
        <button class="dialogbuttleft" @click="addmyresume()">去创建</button>
        <button class="dialogbuttright" @click="denic()">再看看</button>
      </div>
    </div>
    <van-dialog v-model="showsq" title="申请职位">
      <p class="showsqdf">该岗位为樟树市人才服务代招职位，如需投递请联系招聘负责人。</p>
      <p class="showsqdf">联系人：{{reslit.name}}</p>
      <p class="showsqdf">联系电话：{{reslit.phone}}</p>
      <p class="showsqdf">座机：{{reslit.tel===''?"暂无":reslit.tel}}</p>
      <p class="showsqdf">联系邮箱：{{reslit.mail}}</p>

    </van-dialog>
  </div>
</template>
<script>
import POSITIONLIST from '@/api/PositionList'
import RESUMEMANAGEMENT from '@/api/ResumeManagement'
import timedate from '@/assets/js/datatime'
import { _debounce } from '@/assets/js/public'
export default {
  data () {
    return {
      zw: '',
      showsq: false,
      loading: false,
      showPickerqwdd: false,
      liaisonmanshow: false,
      dialogshow: false,
      ckshow: true,
      qbshow: false,
      collectneme: '收藏',
      ckheight: '',
      liaisonmanarr: [],//联系人存储
      columnsqwdd: [],
      pageInfo: {
        page: 1,
        size: 10
      },
      resumeId: '',
      reslit: {
        sexText: '',
        allureText: '',
        categoryText: '',
        companyId: '',
        maxWage: '',
        minWage: '',
        statusText: '',
        phone: '', // 手机号码
        tel: '', // 座机
        mail: '', // 邮箱
        jobType: 0, // 是否代发职位
        isResumeDeliver: false,
        number: 2,
        companyInfo: {
          address: '', // 公司地址

          areaText: '',

          id: '',
          wageText: '',

          industryText: '',

          logo: '../../assets/img/companyimg.png',

          name: '', // 公司名称
          nature: 50,
          natureText: '',
          onLineJobCount: 5504,

          scale: 81,
          scaleText: '', // 公司规模
          shortName: '',

          tradeText: ''
        },
        contact: '',
        deleted: 1,
        describe: '', // 职位描述
        education: 69,
        educationText: '', // 学历

        id: '',
        maxWageText: '',
        minWageText: '',
        name: '', // 职位名称
        nature: 62,
        natureText: '', // 工作类型
        opeId: '0',
        recruitNum: 1,
        status: 1,
        workArea: '',
        workAreaText: '',
        workExp: 76,
        workExpText: '', // 年限要求
        workPlace: ''
      },
      list: [],
      finished: false
    }
  },
  computed: {},
  methods: {
    onClickRight () { },
    // 查看详情展示和收起
    ckqb () {
      this.ckshow = !this.ckshow
      if (this.ckshow) {
        this.ckheight = '3rem'
      } else {
        this.ckheight = ''
      }
      this.$forceUpdate()
    },
    denic () {
      this.dialogshow = !this.dialogshow
    },
    // 创建简历跳转简历列表
    addmyresume () {
      this.$router.push({
        name: 'resumeRemove'
      })
    },

    uuid (len, radix) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
      var uuid = [], i;
      radix = radix || chars.length;

      if (len) {
        // Compact form
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
      } else {
        // rfc4122, version 4 form
        var r;

        // rfc4122 requires these characters
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';

        // Fill in random data.  At i==19 set the high bits of clock sequence as
        // per rfc4122, sec. 4.1.5
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | Math.random() * 16;
            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
          }
        }
      }

      return uuid.join('');
    },
    // 申请职位
    onConfirmgqwdd (value) {
      if (this.number === 2) {
        let dataJson = [
          { jobId: this.reslit.id, companyId: this.reslit.companyId }
        ]
        let params = {}
        this.resumeId = value.id
        params.resumeId = value.id
        params.dataJson = dataJson
        console.log(dataJson)
        POSITIONLIST.resumeDeliver(params).then(res => {
          console.log(res.data)
          if (res.data.code === 200) {

            this.$router.push({
              name: 'delivered',
              query: {
                namedeliv: '投递成功'
              }
            })


          } else {
            this.$notify(res.data.msg)
          }
        })
      } else {
        this.showPickerqwdd = false
        this.liaisonmanshow = true
      }

    },
    //获取联系人
    queryInfo () {
      POSITIONLIST.queryInfo(this.reslit.companyId).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {

          this.liaisonmanarr = res.data.data
          this.liaisonmanarr.map(item => {
            item.lastLoginTime = item.lastLoginTime.slice(0, 16)
            item.comname = item.name + '(' + item.lastLoginTime + '在线' + ')'


          })


        } else {
          this.$notify(res.data.msg)
        }
      })
    },

    //沟通聊天
    chatInsert (value) {
      //沟通聊天
      let params = {
        jobId: this.reslit.id,
        resumeId: this.resumeId,
        // senderUserId: localStorage.getItem('ps_userId'),
        senderUserAccountType: 1,
        receiverUserId: value.id,
        receiverUserAccountType: 2,
      };
      POSITIONLIST.chatInsert(params).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {

          this.$router.push({
            name: 'delivered',
            query: {
              namedeliv: '投递成功'
            }
          })


        } else {
          this.$notify(res.data.msg)
        }
      })
    },
    // 职位列表
    positionList (page) {
      let that = this
      let condition = [
        {
          column: 'person_hope_job',
          type: '',
          value: this.reslit.category
        },
        { column: 'include', type: '', value: 'D,CN' }
      ]
      let sort = [{ column: 'refresh_time', type: 'desc' }]
      var formData = new FormData()
      formData.append('page', this.pageInfo.page)
      formData.append('size', this.pageInfo.size)

      formData.append('condition', JSON.stringify(condition))
      formData.append('sort', JSON.stringify(sort))
      POSITIONLIST.jobListPage(formData).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          console.log(1)

          if (!res.data.data.records || res.data.data.records.length === 0) {
            // 加载结束
            that.finished = true
            return
          } else {
            for (let i = 0; i < res.data.data.records.length; i++) {
              res.data.data.records[i].refreshTime = timedate(
                res.data.data.records[i].refreshTime
              )
            }
            for (let i = 0; i < res.data.data.records.length; i++) {
              that.list.push(res.data.data.records[i])
            }
            that.loading = false
          }

          // 如果列表数据条数>=总条数，不再触发滚动加载
          if (that.list.length >= res.data.data.total) {
            that.finished = true
          }
        } else {
          that.pageInfo.page = page
          that.finished = true
        }
      })
    },
    // 获取详情
    jobget (id) {
      let that = this
      POSITIONLIST.jobget(id).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          that.reslit = res.data.data
          if (res.data.data.favorite) {
            that.collectneme = '取消收藏'
          } else {
            that.collectneme = '收藏'
          }
          if (!that.reslit.companyInfo.logo) {
            that.reslit.companyInfo.logo = require('../../assets/img/companyimg.png')
          }
          that.reslit.refreshTime = /\d{4}-\d{1,2}-\d{1,2}/g
            .exec(that.reslit.refreshTime)
            .toString()
          that.reslit.describe = decodeURI(that.reslit.describe)
          console.log(that.reslit.describe, 'that.reslit.describe')
          that.$nextTick(() => {
            let height = window.getComputedStyle(this.$refs.element).height
            console.log(height, 'contentHeight')
            if (parseInt(height) > 96) {
              that.qbshow = true
            }
            that.ckheight = '3rem'
          })

          console.log(that.reslit.describe.length)
          // that.positionList(condition);
        }
        this.$forceUpdate()
      })
    },
    // 收藏和取消收藏
    iffavorite () {
      if (this.collectneme === '收藏') {
        this.favoriteSave()
      } else {
        this.favoriteDelete()
      }
    },
    // 收藏
    favoriteSave () {
      let that = this
      var formData = new FormData()
      formData.append('jobId', this.reslit.id)
      formData.append('userId', '')
      formData.append('companyId', this.reslit.companyId)
      POSITIONLIST.favoriteSave(formData).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          // that.collectneme = "取消收藏";
          this.$router.push({
            name: 'delivered',
            query: {
              namedeliv: '收藏成功'
            }
          })
          //  that.$toast("收藏成功");
        } else {
          that.$notify(res.data.msg)
        }
      })
    },
    // 取消收藏
    favoriteDelete () {
      let that = this
      var formData = new FormData()
      formData.append('jobId', this.reslit.id)
      formData.append('userId', '')
      POSITIONLIST.favoriteDelete(formData).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          that.collectneme = '收藏'
          that.$toast('取消成功')
        } else {
          that.$notify(res.data.msg)
        }
      })
    },
    // 详情跳转
    jobdetails (id, companyId, category) {
      this.ckheight = ''
      this.qbshow = false
      this.reslit.companyId = companyId
      this.reslit.category = category
      this.jobget(id)
      scrollTo(0, 0)
    },
    // 申请职位
    resumeDeliver (number) {
      let that = this
      this.number = number
      console.log(that.reslit.jobType, 'that.jobType')
      if (that.reslit.jobType === 1) {
        that.showsq = true
      } else {
        RESUMEMANAGEMENT.selectResumeList().then(res => {
          console.log(res.data)
          if (res.data.code === 200) {
            if (res.data.data !== null && res.data.data.length !== 0) {
              that.columnsqwdd = res.data.data
              let num = 0
              for (let i = 0; i < that.columnsqwdd.length; i++) {
                if (that.columnsqwdd[i].express) {
                  num = 1
                  that.onConfirmgqwdd(that.columnsqwdd[i])
                }
              }
              if (num === 0) {
                that.showPickerqwdd = true
              }
            } else {
              that.dialogshow = true
            }
          } else {
            that.pageInfo.page--
          }
        })
      }
    },
    // 上拉加载
    onLoad: _debounce(function (_type, index, item) {
      let that = this

      that.loading = false
      setTimeout(() => {
        that.pageInfo.page++
        that.positionList(that.pageInfo.page)
      }, 100)
    }, 1000),
    // 公司详情
    companyDetails () {
      this.$router.push({
        name: 'companyDetails',
        query: {
          id: this.reslit.id,
          companyId: this.reslit.companyId
        }
      })
    }
  },
  created () {

    if (this.$route.query.id) {
      this.reslit.id = this.$route.query.id
      this.reslit.companyId = this.$route.query.companyId
      this.reslit.category = this.$route.query.category
      this.positionList(1)
      this.jobget(this.$route.query.id)
      if (this.$route.query.collect) {
        this.collectneme = '取消收藏'
      }
    }
    this.queryInfo()
  }
}
</script>
<style scoped>
.showsqdf {
  line-height: 60px;
}
.jobbuttonbutt {
  margin-bottom: 1.3rem;
}
</style>
